<template>
  <div class="tag">
    <page-loading
      :loading.sync="pageLoading"
      :error.sync="pageError"
      @reload="init"
    >

      <div class="basic-info" v-if="tagInfo">
        <div class="cover" :style="'background-image:url('+formatCover+')'"></div>
        <div class="info">
          <span class="name">{{tagInfo.tag_name}}</span>
          <span>{{tagInfo.count.atten | formatNumber }}关注</span>
          <span>{{tagVideoNum}}个相关视频</span>
        </div>
        <template v-if="!focused">
          <van-button type="default" :color="rootThemeColor" plain class="follow-btn" size="small">关注</van-button>
        </template>
        <template v-else>
          <van-button type="default" disabled plain class="follow-btn" size="small">已关注</van-button>
        </template>
      </div>

      <div class="similar" v-if="similarTags.length">
        <div class="similar-head">
          <span>相关标签</span>
          <span @click="toggleDetail"><i class="fa" :class="[expand?'fa-dropup':'fa-dropdown']"></i></span>
        </div>
        <div class="similar-body animation" :style="moreStyle">
          <div class="content" id="moreContent">
            <van-tag
              class="vtag"
              v-for="tag in similarTags"
              :key="tag.tid"
              round
              @click="onTagClick(tag)"
            >
              {{ tag.tname }}
            </van-tag>
          </div>
        </div>
      </div>

      <div class="similar" v-if="tagVideos.length">
        <div class="similar-head">
          <span>相关推荐</span>
        </div>
        <div class="similar-body no-pt">
          <video-item
            v-for="item in tagVideos"
            :key="item.aid"
            :aid="item.aid"
            :bvid="item.bvid"
            :author="item.owner.name"
            :title="item.title"
            :coverPath="item.pic"
            :view="item.stat.view"
            :danmaku="item.stat.danmaku"
            :duration="item.duration"
            :allParams="item"
            layout="ltr"
          />
        </div>
      </div>

    </page-loading>
  </div>
</template>

<script>
import PageLoading from '@/components/page-loading/PageLoading.vue'
import pageLoadingMixin from '@/mixins/pageLoading'
import VideoItem from '@/components/video-item/VideoItem.vue'
import { Button as VanButton, Tag as VanTag } from 'vant'
import { formatNumber } from '@/filters/filters.js'
import { apiGetTagInfo, apiGetTagRelated, apiGetTagVideos } from '@/api/tag.js'
export default {
  name: 'Tag',
  components: {
    VanButton,
    VanTag,
    PageLoading,
    VideoItem
  },
  inject: ['rootRouter', 'rootThemeColor', 'rootTitle', 'rootKeyword', 'rootDescription'],
  mixins: [pageLoadingMixin],
  metaInfo () {
    return {
      title: this.title,
      meta: [
        { name: 'keywords', content: this.keywords },
        { name: 'description', content: this.rootDescription }
      ]
    }
  },
  props: {
    tid: {
      type: [Number, String],
      required: true
    },
    cover: {
      type: String
    }
  },
  data () {
    return {
      tagId: this.tid,
      tagInfo: null,
      similarTags: [],
      tagVideos: [],
      tagVideoNum: 0,
      expand: false,
      moreStyle: ''
    }
  },
  computed: {
    hasInfo () {
      return this.tagInfo !== null
    },
    title () {
      let word = `聚合信息-${this.rootTitle}`
      if (this.hasInfo) {
        word = `${this.tagInfo.tag_name}_${word}`
      }
      return word
    },
    keywords () {
      let word = this.rootKeyword
      if (this.hasInfo) {
        word = `${this.tagInfo.tag_name},${this.rootKeyword}`
      }
      return word
    },
    formatCover () {
      return this.cover ? this.cover : require('@/assets/tag.png')
    },
    focused () {
      return this.tagInfo ? (this.tagInfo.is_atten !== 0) : false
    }
  },
  filters: {
    formatNumber
  },
  /* beforeRouteUpdate (to, from, next) {
    const { params: { tid } } = to
    this.tagId = tid
    next()
  }, */
  created () {
    this.init()
  },
  watch: {
    tid: {
      handler (newVal) {
        this.tagId = newVal
      }
    },
    tagId: {
      handler (newVal) {
        this.init()
      }
    }
  },
  methods: {
    init () {
      this.getData()
      this.getSimilarTags()
      this.getTagVideos()
    },
    getData () {
      apiGetTagInfo({
        tid: this.tagId
      }).then(res => {
        const { data, code } = res
        if (code === 0 && data !== null) {
          this.tagInfo = data
        } else {
          this.pageError = true
        }
      }).catch(err => {
        console.log(err)
        this.rootRouter.replace({ name: '404' })
        // this.pageError = true
      }).finally(() => {
        this.pageLoading = false
      })
    },
    // 获取相关tag
    getSimilarTags () {
      apiGetTagRelated({
        tid: this.tagId
      }).then(res => {
        const { data, code } = res
        if (code === 0 && data !== null) {
          this.similarTags = data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取标签的相关视频
    getTagVideos () {
      apiGetTagVideos({
        tid: this.tagId
      }).then(res => {
        const { data, code, total } = res
        if (code === 0 && data !== null) {
          this.tagVideos = data
          this.tagVideoNum = total
        }
      }).catch(err => {
        console.log(err)
      })
    },
    toggleDetail () {
      this.expand = !this.expand
      if (this.expand) {
        const height = window.getComputedStyle(document.querySelector('#moreContent')).height
        this.moreStyle = `height:${height}`
      } else {
        this.moreStyle = ''
      }
    },
    onTagClick (tag) {
      this.rootRouter.push({ name: 'tag', params: { tid: tag.tid, cover: tag.cover } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .basic-info {
    display: flex;
    padding: rem(20px) rem(10px);
    border-bottom: 1px solid $color-grey;
    .cover{
      width: rem(73px);
      height: rem(73px);
      margin-right: rem(10px);
      border: 1px solid $color-grey;
      background: {
        repeat: no-repeat;
        position: 50%;
      }
      overflow: hidden;
    }
    .info{
      align-self: center;
      flex: 2;
      display: flex;
      flex-direction: column;
      font-size: rem(12px);
      color: $color-text-secondary;
      .name{
        font-size: rem(16px);
        color: $color-text-primary;
        margin-bottom: rem(10px);
      }
    }
    .follow-btn{
      align-self: center;
      font-size: rem(14px);
    }
  }
  .similar {
    padding: {
      left: rem(10px);
      right: rem(10px);
    };
    &-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: {
        top: rem(5px);
        bottom: rem(10px);
      };
      margin-top: rem(10px);
      font-size: rem(16px);
    }
    &-body{
      padding: {
        top: rem(10px);
        bottom: rem(10px);
      };
      &.animation{
        height: rem(46px);
        transition: height .3s;
        overflow: hidden;
        box-sizing: border-box;
      }
    }
  }
  .no-pt{
    padding-top: 0;
  }
  .vtag {
    margin: {
      right: rem(10px);
      bottom: rem(6px);
    }
    padding: rem(8px) rem(18px);
    color: $color-text-regular;
    background-color: $color-grey;
    font-size: rem(12px);
  }
</style>
